<template>
    <div class="pagestyle">
        <el-row :gutter="20">
            <el-col :span="24">
                <p class="title_btn"><span>知识库</span>
                    <el-popover :visible="state.addvisible" title="新增" placement="bottom" :width="160">
                        <p>
                            <el-input v-model="state.systemName" placeholder="请输入名称">
                            </el-input>
                        </p>
                        <div style="text-align: right; margin: 0">
                            <el-button type="info" size="small" text @click="state.addvisible = false">取消</el-button>
                            <el-button size="small" type="primary" @click="addClick">
                                确认
                            </el-button>
                        </div>
                        <template #reference>
                            <el-button @click="state.addvisible = true" type="primary" size="mini">
                                <svg-icon class-name="search-icon" icon-class="xinzeng" />创建知识库</el-button>
                        </template>
                    </el-popover>
                </p>
            </el-col>
            <el-col :span="6" style="margin-bottom: 32px;">
                <el-input v-model="state.pageConfig.name" placeholder="搜索文件">
                    <template #append>
                        <span @click="searchClick">
                            <svg-icon class-name="search-icon" icon-class="sousuo" />
                            搜索
                        </span>
                    </template>
                </el-input>
            </el-col>
            <el-col :span="24">
                <el-row :gutter="20">
                    <el-col :span="4" v-for="item in state.dataList" class="mb" style="height: 100%;">
                        <el-card @click="dataListClick(item)">
                            <div class="ca_title">
                                <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                                <el-tooltip placement="bottom" effect="light">
                                    <template #content>
                                        <span style="color: rgba(227, 60, 100, 1);">删除
                                            <svg-icon style="margin-left: 10px;" class-name="search-icon"
                                                icon-class="mianxingshanchu" /></span>
                                    </template>
                                    <svg-icon class-name="search-icon" icon-class="gengduoH" />
                                </el-tooltip>
                            </div>
                            <div class="titleText">
                                <el-tooltip class="box-item" effect="light" :content="item.dataset_name"
                                    placement="top-start">
                                    <span>{{item.dataset_name}}</span>
                                </el-tooltip>

                            </div>
                            <p class="subTitle">
                                <svg-icon class-name="search-icon" icon-class="shuji1-geejkf75" />
                                {{item.document_count}}文档</p>
                            <p class="subTitle">
                                <svg-icon class-name="search-icon" icon-class="shijian-geejkf66" />
                                {{ dayjs(item.create_time).format('YYYY-MM-DD hh:mm:ss') }}</p>
                        </el-card>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <el-pagination class="globalFontSize" v-model:current-page="state.pageConfig.page"
            v-model:page-size="state.pageConfig.per_page" :page-sizes="[10, 20, 30, 40]" background
            layout="total, sizes, prev, pager, next, jumper" :total="state.pageConfig.total"
            @size-change="pagechangeSize" @current-change="pagechange" />
    </div>
</template>
<script setup>
    import {
        computed,
        reactive
    } from "vue";
    import axios from "axios"
    import dayjs from 'dayjs'
    const router = useRouter();
    let state = reactive({
        dataList: [],
        search: '',
        addvisible: false,
        systemName: '',
        pageConfig: {
            page: 1,
            per_page: 10,
            total: 0,
            name:''
        }
    })

    function addClick() {
        axios.post('/chat-api/datasets', {
            systemName: state.systemName
        }).then(res => {
            if (res.status == 'success') {
                state.addvisible = false
            }
        })
    }

    function getdatasetList() {
        axios.post('/chat-api/datasets/list', {
            name: state.pageConfig.name,
            page: state.pageConfig.page,
            per_page: state.pageConfig.per_page
        }).then(res => {
            state.dataList = res.data.datasets
            state.pageConfig.total=res.data.total_datasets
        })
    }
    getdatasetList()
    // 搜索按钮
    function searchClick(){
        getdatasetList()
    }
    // 分页
    function pagechangeSize(val){
        state.pageConfig.page=1
        state.pageConfig.per_page=val
        getdatasetList()
    }
    function pagechange(val){
        state.pageConfig.page=val
        getdatasetList()
    }

    function dataListClick(item) {
        router.push({
            path: '/knowledgeAiChat/know_dataSet',
            query: {
                id: item.dataset_id,
                name: item.dataset_name
            }
        })
    }
</script>
<style scoped lang="scss">
    .pagestyle {
        position: relative;
        margin: 12px;

        .globalFontSize {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }
    }

    .mb {
        margin-bottom: 10px;
    }

    :deep(.el-input-group__append, .el-input-group__prepend) {
        background-color: #409eff;
        color: #fff;
    }

    .pagestyle {
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.6);
        box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.12);
        padding: 15px 16px;

        .title_btn {
            font-size: 18px;
            font-weight: 700;
            color: rgba(62, 70, 79, 1);
            display: flex;
            justify-content: space-between;
        }

        .ca_title {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .titleText {
            margin-top: 20px;
            font-size: 20px;
            color: rgba(62, 70, 79, 1);
            font-weight: 500;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        .subTitle {
            margin: 0;
            padding: 0;
            margin-top: 10px;
            color: rgba(51, 51, 51, 1);
            font-size: 14px;
            font-weight: 500;

        }
    }
</style>